<header class="main-header">
    <nav class="main-header__nav">
        <ul class="main-header__item-list">
            <li class="main-header__item">
                <a class="<%= path === '/' ? 'active' : '' %>" href="/">
                    Shop
                </a>
            </li>

            <li class="main-header__item">
                <a class="<%= path === '/products' ? 'active' : '' %>" href="/products">
                    Products
                </a>
            </li>

            <% if(isAuthenticated) { %>
            <li class="main-header__item">
                <a class="<%= path === '/cart' ? 'active' : '' %>" href="/cart">
                    Cart
                </a>
            </li>

            <li class="main-header__item">
                <a class="<%= path === '/orders' ? 'active' : '' %>" href="/orders">
                    Orders
                </a>
            </li>

            <li class="main-header__item">
                <a class="<%= path === '/admin/add-product' ? 'active' : '' %>" href="/admin/add-product">
                    Add Product
                </a>
            </li>

            <li class="main-header__item">
                <a class="<%= path === '/admin/products' ? 'active' : '' %>" href="/admin/products">
                    Admin Product
                </a>
            </li>
            <% } %>
        </ul>

        <ul class="main-header__item-list">
            <% if(!isAuthenticated) { %>
                <li class="main-header__item">
                    <a class="<%= path === '/login' ? 'active' : '' %>"  href="/login">
                        Login
                    </a>
                </li>
            <% } else { %>
            <li class="main-header__item">
                <form action="/logout" method="post">
                    <button type="submit">
                        Logout
                    </button>
                </form>
            </li>
            <% } %>
        </ul>
    </nav>
</header>